<template>
  <div class="content">
    <!-- <div class="mainTitle">系统用量</div> -->
    <div class="wrap">
      <el-row :gutter="11">
        <el-col :span="8">
          <el-card>
            <div class="section section1">
              <div class="tit">当前套餐</div>
              <div class="content">
                <el-row :gutter="10">
                  <el-col :span="12">
                    <div class="item">
                      <div class="img">
                        <img src="@/assets/imgs/middleWork/sys1.png" alt="" />
                      </div>
                      <div class="tit">API接口调用次数</div>
                      <div class="count">
                        {{
                          mealInfo.trade_limit_times
                            ? mealInfo.trade_limit_times
                            : 0
                        }}次/月
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="item sec">
                      <div class="img">
                        <img src="@/assets/imgs/middleWork/sys2.png" alt="" />
                      </div>
                      <div class="tit">交易接口最大并发数</div>
                      <div class="count">
                        {{
                          mealInfo.trade_qps
                            ? mealInfo.currentMeal.id ==
                              "ao10aq_04d53185b271410996b6fd3324873f0c"
                              ? "200+"
                              : mealInfo.trade_qps
                            : 0
                        }}次/秒
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
              <div class="bottom">
                <div class="l">
                  <span class="">超量通知</span>
                  <div
                    class="color"
                    @click="openDia1"
                    v-if="!authInfo.noticeTypes.includes(-1)"
                  >
                    {{
                      authInfo.noticeTypes.includes(1) &&
                      authInfo.noticeTypes.includes(0)
                        ? "邮件短信"
                        : authInfo.noticeTypes.includes(0)
                        ? "短信"
                        : "邮件"
                    }}提醒
                  </div>
                  <div class="color" @click="openDia1" v-else>站内通知</div>
                </div>
                <div class="outTime">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="Left Center 提示文字"
                    placement="top"
                  >
                    <div slot="content" style="max-width: 15rem">
                      <div class="tit">
                        云尘付不同版本对应不同套餐使用量，支持用户超量使用，用户超用使用后API调用超量账单于次月1日生成，超量部分以125元/万次/年单价收取，且超量计费天数默认为一整月。超量账单生成后60天内仍未支付超量费用的，云尘付将不再支持API调用。
                      </div>
                    </div>
                    <i class="el-icon-warning tip"></i>
                  </el-tooltip>
                  <span class="ti">超量规则</span>
                </div>
              </div>
            </div>
          </el-card>
          <el-card>
            <div class="section section2">
              <div class="tit">API接口套餐用量</div>
              <div
                class="content"
                id="main"
                style="width: 100%; height: 210px"
              ></div>
              <div class="bottom">
                <div class="l">
                  <span class="">已使用</span>
                  &nbsp;
                  <span class="count">{{ mealInfo.trade_use_times }}次</span>
                </div>
                <div class="l">
                  <span class="">剩余</span>
                  &nbsp;
                  <span class="count ac"
                    >{{ mealInfo.trade_remainder_times }}次</span
                  >
                </div>
                <div class="l">
                  <span class="">超量</span>
                  &nbsp;
                  <span class="count bc"
                    >{{ mealInfo.trade_excess_times }}次</span
                  >
                </div>
              </div>
            </div>
          </el-card>
          <el-card
            class="excess-card"
            :class="excessInfo.isExcess ? 'warn' : ''"
          >
            <div class="excess-wrap">
              <div class="l">
                <div class="tit" :class="excessInfo.isExcess ? 'warn' : ''">
                  超量费用
                </div>
                <div class="amount" :class="excessInfo.isExcess ? 'warn' : ''">
                  {{ excessInfo.excessAmount || "0.00" }}
                </div>
              </div>
              <div class="r" @click="toExcess">
                <div class="tit" :class="excessInfo.isExcess ? 'warn' : ''">
                  {{ excessInfo.isExcess ? "查看账单并支付" : "历史账单" }}
                </div>
                <i
                  class="el-icon-arrow-right"
                  :class="excessInfo.isExcess ? 'warn' : ''"
                ></i>
              </div>
            </div>
          </el-card>
          <!-- 套餐升级 -->
          <div class="sirb">
            <div class="left">
              <div class="tit">套餐升级</div>
              <div class="desc">
                <div class="item">
                  <span class="ic"></span>
                  <span>接口调用次数</span>
                </div>
                <div class="item">
                  <span class="ic"></span>
                  <span>最大并发数</span>
                </div>
                <div class="item">
                  <span class="ic"></span>
                  <span>1V1服务</span>
                </div>
              </div>
              <div class="btn" @click="toPurchaseMeal">立即升级</div>
            </div>
            <div class="right">
              <img src="@/assets/imgs/qiye/r.png" alt="" />
            </div>
          </div>

          <!-- <el-card>
            <div class="section section3">
              <div class="tit">
                交易接口平均并发数
                <span>本统计数依据商户半年使用情况作以计算</span>
              </div>
              <div class="tot">
                <span>120</span>
                次/秒
              </div>
              <div class="content" id="main1" style="height: 70px"></div>
            </div>
          </el-card> -->
        </el-col>
        <el-col :span="16">
          <el-card>
            <div class="section section4">
              <div class="tit">42日最大并发值</div>
              <div class="content" id="main2" style="height: 348px"></div>
              <div class="lines"></div>
            </div>
          </el-card>

          <el-card>
            <div class="section section5">
              <div class="tit">
                <div>API接口调用次数</div>
                <div class="timeCycle">
                  <div
                    :class="timeCycleVal === 'd' ? 'activeTime' : ''"
                    @click="handleTimeCycle('d')"
                  >
                    近30日
                  </div>
                  <div
                    :class="timeCycleVal === 'm' ? 'activeTime' : ''"
                    @click="handleTimeCycle('m')"
                  >
                    按月
                  </div>
                </div>
              </div>
              <div class="content" id="main3" style="height: 350px"></div>
              <div class="bottom">
                <div class="l">
                  <span class="">最高值</span>
                  &nbsp;
                  <span class="count"
                    >{{ apiInfo.max }}次{{
                      this.timeCycleVal == "d" ? "/日" : "/月"
                    }}</span
                  >
                  &nbsp;
                  <span class="count">{{ apiInfo.maxDate }}</span>
                </div>
                <div class="l">
                  <span class="">最低值</span>
                  &nbsp;
                  <span class="count"
                    >{{ apiInfo.min }}次{{
                      this.timeCycleVal == "d" ? "/日" : "/月"
                    }}</span
                  >
                  &nbsp;
                  <span class="count">{{ apiInfo.minDate }}</span>
                </div>
                <div class="l">
                  <span class="">平均值</span>
                  &nbsp;
                  <span class="count"
                    >{{ apiInfo.avg }}次{{
                      this.timeCycleVal == "d" ? "/日" : "/月"
                    }}</span
                  >
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- <el-card style="min-width: 1200px">
      <div class="wrap2">
        <div class="item2 one">
          <div>
            <span>手续费余额</span>
            <span class="number">¥800.00</span>
          </div>
          <div>
            <el-button type="text" @click="openDia(1)">充值</el-button>
            <el-button type="text" class="look">查看余额明细</el-button>
          </div>
        </div>
        <div class="item2 two">
          <div>
            <span>鉴权服务余额</span>
            <span class="number">¥8000.00</span>
          </div>
          <div>
            <el-button type="text" @click="openDia(2)">充值</el-button>
            <el-button type="text" class="look">查看余额明细</el-button>
          </div>
        </div>
      </div>
    </el-card> -->

    <!-- 余额不足弹窗 -->
    <el-dialog
      class="cardDialog"
      :visible.sync="chargeDia"
      :show-close="false"
      width="520px"
      top="30vh"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="addTitle">
        <span>超量通知</span>
      </div>
      <div class="tip">为不影响您的正常使用请务必合理设置</div>
      <el-form ref="form" :rules="rules" :model="form">
        <el-form-item label="通知" class="notice">
          <el-checkbox v-model="form.emailType" class="width440">
            <el-form-item prop="email">
              邮件&nbsp;
              <el-input
                v-model="form.email"
                maxlength="64"
                placeholder="请输入邮箱"
                class="width380"
              ></el-input>
            </el-form-item>
          </el-checkbox>
          <el-checkbox v-model="form.phoneType" class="width440">
            <el-form-item prop="mobilePhone">
              短信&nbsp;
              <el-input
                v-model="form.mobilePhone"
                placeholder="请输入手机号"
                class="width380"
              ></el-input>
            </el-form-item>
          </el-checkbox>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cencelReset">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { isEmail, isMobile } from "@/utils/validate";

export default {
  name: "systemUsage",
  data() {
    const testPhone = (rule, value, callback) => {
      if (!value && this.form.phoneType) {
        callback(new Error("请输入手机号"));
      } else {
        if (isMobile(value) || !value) {
          callback();
        } else {
          callback(new Error("号码格式不正确"));
        }
      }
    };
    const checkEmail = (rule, value, callback) => {
      if (!value && this.form.emailType) {
        callback(new Error("请输入邮箱"));
      } else {
        if (isEmail(value) || !value) {
          callback();
        } else {
          callback(new Error("请输入有效的邮箱地址"));
        }
      }
    };
    return {
      excessInfo: {
        isExcess: false,
      },
      authInfo: {
        noticeTypes: [-1],
      },
      curMeal: {
        mealName: "",
      }, //当前套餐
      curMealId: 0,
      mealInfo: {}, //套餐相关
      apiInfo: {}, // api统计
      timeCycleVal: "d",
      datalist_42: [],
      pieces_42: [],
      date_42: [],
      form: {
        emailType: true,
        phoneType: true,
        email: "",
        mobilePhone: "",
      },
      rules: {
        amount: [
          { required: true, message: "金额不能为空", trigger: "change" },
        ],
        email: [{ validator: checkEmail, trigger: "change" }],
        mobilePhone: [
          {
            pattern: /^(?!\s+).*(?<!\s)$/,
            message: "格式有误",
            trigger: "change",
          },
          {
            validator: testPhone,
            trigger: "change",
          },
        ],
      },
      list: [],
      rechargeType: 1, //默认手续费类型
      chargeDia: false,

      myChart: null,
      myChart1: null,
      myChart2: null,
      myChart3: null,
      echartsSumnum: 200, //数据总数
      option: {
        title: {
          text: "", //主标题 (主标题里面来动态显示当前数据总数)
          subtext: "使用次数", //副标题
          x: "center", //标题x轴居中（也可以是: left || center || right || 百分比：xx% || xx(默认单位px)  ）
          y: "55%", //标题y轴居中（也可以是: top || center || bottom || 百分比：xx% || xx(默认单位px)  ）
          itemGap: 2, //主标题和副标题之间的距离(默认为 0)
          textStyle: {
            fontSize: 24,
            color: "#000000",
          },
          subtextStyle: {
            fontSize: 12,
            color: "rgba(0,0,0,0.45)",
          },
        },
        tooltip: {
          trigger: "item",
          formatter(param) {
            return param.name + " " + (param.percent * 2).toFixed(2) + "%";
          },
        },
        // color: ["#3fbbbc", "#ccc"], // 饼图各块颜色
        series: [
          {
            name: "",
            type: "pie",
            radius: ["95%", "110%"],
            center: ["50%", "70%"],
            // adjust the start angle
            startAngle: 180,
            label: {
              show: false,
              formatter(param) {
                // correct the percentage
                return (
                  param.name + " (" + (param.percent * 2).toFixed(2) + "%)"
                );
              },
            },
            data: [
              { value: 87, name: "使用次数" },
              { value: 13, name: "剩余" },
              {
                // make an record to fill the bottom 50%
                value: 100,
                itemStyle: {
                  // stop the chart from rendering this piece
                  color: "none",
                  decal: {
                    symbol: "none",
                  },
                },
                label: {
                  show: false,
                },
              },
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
              normal: {
                color: function (params) {
                  var colorList = [
                    {
                      c1: "#25B5D9", //管理
                      c2: "#BEEEFA",
                    },
                    {
                      c1: "#E2E2E2", //实践
                      c2: "#E2E2E2",
                    },
                    {
                      c1: "#63E587", //操作
                      c2: "#5FE2E4",
                    },
                  ];
                  return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    {
                      //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                      offset: 0,
                      color: colorList[params.dataIndex].c1,
                    },
                    {
                      offset: 1,
                      color: colorList[params.dataIndex].c2,
                    },
                  ]);
                  /*  return colorList[params.dataIndex]*/
                },
              },
            },
          },
        ],
      },
      option1: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
          formatter: function (params) {
            // console.log(params);
            let str = ``;
            params.forEach((item, idx) => {
              str += `${item.marker} ${item.seriesName}: ${item.data}%`;
              str += idx === params.length - 1 ? "" : "<br/>";
            });
            return str;
          },
        },
        grid: {
          left: "3%",
          right: "3%",
          top: "3%",
          bottom: "3%",
          // containLabel: true,
        },
        xAxis: {
          show: false,
          type: "value",
          boundaryGap: false,
          data: [""],
        },
        yAxis: {
          show: false,
          type: "category",
          data: [""],
        },
        color: ["#25B5D9", "#4F595F", "#E2E2E2"],
        series: [
          {
            name: "Direct",
            type: "bar",
            stack: "total",
            emphasis: {
              focus: "series",
            },
            label: {
              //echarts饼图内部显示百分比设置
              show: true,
              position: "inside", //outside 外部显示  inside 内部显示
              formatter: `{c} %`,
              color: "#ffffff", //颜色
              fontSize: 12, //字体大小
            },
            data: [67],
            itemStyle: {
              normal: {
                //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                barBorderRadius: [8, 0, 0, 8],
              },
            },
          },
          {
            name: "Mail Ad",
            type: "bar",
            stack: "total",

            emphasis: {
              focus: "series",
            },
            label: {
              //echarts饼图内部显示百分比设置
              show: true,
              position: "inside", //outside 外部显示  inside 内部显示
              formatter: `{c} %`,
              color: "#ffffff", //颜色
              fontSize: 12, //字体大小
            },
            data: [24],
          },
          {
            name: "rest",
            type: "bar",
            stack: "total",
            emphasis: {
              focus: "series",
            },
            data: [9],
            itemStyle: {
              normal: {
                //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                barBorderRadius: [0, 8, 8, 0],
              },
            },
          },
        ],
      },
      option3: {
        tooltip: {
          show: true, //---是否显示提示框,默认为true
          trigger: "item", //---数据项图形触发
          axisPointer: {
            type: "shadow",
            axis: "auto",
          },
          padding: 5,
          textStyle: {
            color: "#666666",
          },
        },
        grid: {
          // height: "55%",
          top: "15%",
          left: "6%",
          right: "6%",
          bottom: "15%",
        },
        xAxis: {
          type: "category",
          axisLabel: {
            interval: 0,
            rotate: 40,
          },
          axisTick: {
            show: false, // 是否显示坐标轴刻度
          },
          axisLine: {
            show: true, // 是否显示坐标轴轴线
            lineStyle: {
              color: "#d8d8d8", // 坐标轴线线的颜色
              // width: "5", // 坐标轴线线宽
              // type: "solid", // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
            },
          },
          // splitArea: {
          //   show: true,
          // },
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: {
          name: "API接口调用次数", //---系列名称
          type: "bar", //---类型
          legendHoverLink: true, //---是否启用图例 hover 时的联动高亮
          label: {
            //---图形上的文本标签
            show: false,
            position: "insideTop", //---相对位置
            rotate: 0, //---旋转角度
            color: "#eee",
          },
          itemStyle: {
            //---图形形状
            color: "#25B5D9",
            barBorderRadius: [18, 18, 0, 0],
          },
          barWidth: "20", //---柱形宽度
          // barCategoryGap: "20%", //---柱形间距
          data: [
            120, 200, 150, 80, 70, 110, 130, 80, 55, 30, 130, 150, 120, 200,
            150, 80, 70, 110, 130, 80, 55, 30, 130, 150, 0, 12, 0, 14, 0, 16,
          ],
        },
      },
    };
  },
  created() {
    this.getMealInfo();
    this.getApiCount();
    this.get42Api();
    // this.getMealList(); //获取套餐信息
    //获取超量通知信息
    this.getAuthInfo();
    this.getExcessInfo();
  },
  mounted() {
    // this.initEchats(); //API接口套餐用量
    // this.initEchats1();
    // this.initEchats2();
    // this.initEchats3();
    this.resetRender();
  },
  methods: {
    openDia1() {
      this.form.emailType = this.authInfo.noticeTypes.includes(1);
      this.form.phoneType = this.authInfo.noticeTypes.includes(0);
      this.form.email = this.authInfo.email;
      this.form.mobilePhone = this.authInfo.mobilePhone;
      this.chargeDia = true;
    },
    getAuthInfo() {
      this.$http
        .get("/api/merchant/memberauth/getAuthAccount?business=meal")
        .then((res) => {
          if (res.code === "0000") {
            console.log(res.data);
            this.authInfo = res.data;
            // this.form.email = res.data.email;
            // this.form.mobilePhone = res.data.mobilePhone;
            // this.form.emailType = res.data.noticeTypes.includes(1);
            // this.form.phoneType = res.data.noticeTypes.includes(0);
          }
        });
    },
    getExcessInfo() {
      this.$http.get("/api/member/month/bill/isExcess").then((res) => {
        if (res.code === "0000") {
          console.log(res.data);
          this.excessInfo = res.data;
        }
      });
    },
    toExcess() {
      this.$router.push("/qiye/excess");
    },
    toPurchaseMeal() {
      this.$store.commit("changeCustom", true);
      // console.log(this.curMeal.mealName);
      // switch (this.curMeal.mealName) {
      //   case "标准版":
      //     this.curMeal.mealName = "专业版";
      //     break;
      //   case "专业版":
      //     this.curMeal.mealName = "旗舰版";
      //     break;
      //   case "旗舰版":
      //     this.curMeal.mealName = "旗舰版";
      //     break;
      //   default:
      //     this.curMeal.mealName = "标准版";
      //     break;
      // }
      // console.log(this.curMeal.mealName);
      // this.$router.push({
      //   name: "purchaseView",
      //   query: { id: this.curMealId, type: 0, meal:this.curMeal.mealName },
      // });
    },
    getMealList() {
      this.$http.get("/sys/meal/listMeal").then((res) => {
        if (res.code === "0000") {
          this.curMeal =
            res.data[0].baseServiceMealList &&
            res.data[0].baseServiceMealList.length > 0
              ? res.data[0].baseServiceMealList[0]
              : this.curMeal;
          this.curMealId = res.data[0].id;
          //console.log(this.curMeal);
          // this.handleQuery(res.data[0].id);  // 查融聚
        }
      });
    },
    get42Api() {
      this.$http.get("/api/meal/usage/concurrencyChart").then((res) => {
        if (res.code === "0000") {
          //console.log(res.data);
          let list = res.data.dataList
            ? res.data.dataList
            : [
                0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
                0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
              ];
          //console.log(list);

          let origin = [
            [5, 0],
            [5, 1],
            [5, 2],
            [5, 3],
            [5, 4],
            [5, 5],
            [5, 6],
            [4, 0],
            [4, 1],
            [4, 2],
            [4, 3],
            [4, 4],
            [4, 5],
            [4, 6],
            [3, 0],
            [3, 1],
            [3, 2],
            [3, 3],
            [3, 4],
            [3, 5],
            [3, 6],
            [2, 0],
            [2, 1],
            [2, 2],
            [2, 3],
            [2, 4],
            [2, 5],
            [2, 6],
            [1, 0],
            [1, 1],
            [1, 2],
            [1, 3],
            [1, 4],
            [1, 5],
            [1, 6],
            [0, 0],
            [0, 1],
            [0, 2],
            [0, 3],
            [0, 4],
            [0, 5],
            [0, 6],
          ].map((arr, index) => {
            return [...arr, parseInt(list[index])];
          });
          //console.log(origin);
          this.datalist_42 = origin;
          this.pieces_42 = res.data.pieces;
          this.date_42 = res.data.dateList;
          //console.log(this.pieces_42);
          this.initEchats2();
          // this.mealInfo = res.data;
          // this.mealInfo = {
          //   ...this.mealInfo,
          //   use_ratio:
          //     (
          //       this.mealInfo.trade_use_times / this.mealInfo.trade_limit_times
          //     ).toFixed(2) * 100,
          //   rest_ratio:
          //     (1 -
          //       (
          //         this.mealInfo.trade_use_times /
          //         this.mealInfo.trade_limit_times
          //       ).toFixed(2)) *
          //     100,
          // };
          // this.option.series[0].data = [
          //   { value: this.mealInfo.use_ratio, name: "使用次数" },
          //   { value: this.mealInfo.rest_ratio, name: "剩余" },
          //   {
          //     value: 100,
          //     itemStyle: {
          //       color: "none",
          //       decal: {
          //         symbol: "none",
          //       },
          //     },
          //     label: {
          //       show: false,
          //     },
          //   },
          // ];
          // console.log(this.option.series[0].data);
          // this.initEchats(); //API接口套餐用量
        }
      });
    },
    getMealInfo() {
      this.$http.get("/api/meal/usage/mealUseInfo").then((res) => {
        if (res.code === "0000") {
          console.log(res.data);
          this.mealInfo = res.data;
          this.mealInfo = {
            ...this.mealInfo,
            use_ratio: this.mealInfo.trade_limit_times
              ? (
                  (this.mealInfo.trade_use_times /
                    this.mealInfo.trade_limit_times) *
                  100
                ).toFixed(2)
              : 0,
            rest_ratio: this.mealInfo.trade_limit_times
              ? (
                  (1 -
                    this.mealInfo.trade_use_times /
                      this.mealInfo.trade_limit_times) *
                  100
                ).toFixed(2)
              : 100,
          };
          // console.log(this.mealInfo);
          // console.log(this.mealInfo.trade_use_times);
          // console.log(this.mealInfo.trade_limit_times);
          // console.log(
          //   this.mealInfo.trade_use_times / this.mealInfo.trade_limit_times
          // );
          // console.log(this.mealInfo.use_ratio);
          // console.log(this.mealInfo.rest_ratio);
          if (this.mealInfo.use_ratio > 100) {
            this.option.title.subtext = "使用次数";
            this.option.series[0].data = [
              { value: 100, name: "使用次数" },
              { value: 0, name: "剩余" },
              {
                value: 100,
                itemStyle: {
                  color: "none",
                  decal: {
                    symbol: "none",
                  },
                },
                label: {
                  show: false,
                },
              },
            ];
          } else {
            this.option.title.subtext = "使用次数";
            this.option.series[0].data = [
              { value: this.mealInfo.use_ratio, name: "使用次数" },
              { value: this.mealInfo.rest_ratio, name: "剩余" },
              {
                value: 100,
                itemStyle: {
                  color: "none",
                  decal: {
                    symbol: "none",
                  },
                },
                label: {
                  show: false,
                },
              },
            ];
          }
          //console.log(this.option.series[0].data);
          this.initEchats(); //API接口套餐用量
        }
      });
    },
    getApiCount() {
      this.$http
        .get(`/api/meal/usage/interfaceChart?chartType=${this.timeCycleVal}`)
        .then((res) => {
          if (res.code === "0000") {
            //console.log(res.data);
            this.option3 = {
              ...this.option3,
              xAxis: {
                ...this.option3.xAxis,
                data: res.data.xaxis,
              },
              series: {
                ...this.option3.series,
                data: res.data.yaxis,
              },
            };
            this.apiInfo = {
              max:
                res.data.max && res.data.max.ycount ? res.data.max.ycount : "0",
              maxDate:
                res.data.max && res.data.max.xtime ? res.data.max.xtime : "",
              min:
                res.data.min && res.data.min.ycount ? res.data.min.ycount : "0",
              minDate:
                res.data.min && res.data.min.xtime ? res.data.min.xtime : "",
              avg: res.data.avgVal ? res.data.avgVal : "0",
            };
            this.initEchats3();
          }
        });
    },
    resetRender() {
      //自适应重新渲染
      window.addEventListener("resize", () => {
        setTimeout(() => {
          this.myChart.resize();
          this.myChart1.resize();
          this.myChart2.resize();
          this.myChart3.resize();
        }, 100);
      });
    },
    handleTimeCycle(val) {
      if (val !== this.timeCycleVal) {
        this.timeCycleVal = val;
        this.getApiCount(val);
      }
    },
    initEchats() {
      console.log(this.option.series[0]);
      this.option.title.text = this.option.series[0]
        ? this.option.series[0].data[0].value + "%"
        : "";
      var chartDom = document.getElementById("main");
      this.myChart = echarts.init(chartDom);
      this.option && this.myChart.setOption(this.option);
    },
    initEchats1() {
      var chartDom = document.getElementById("main1");
      this.myChart1 = echarts.init(chartDom);
      this.option1 && this.myChart1.setOption(this.option1);
    },
    initEchats2() {
      var chartDom = document.getElementById("main2");
      this.myChart2 = echarts.init(chartDom);
      var option;
      const date = ["", "", "", "", "", "", ""];
      const days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
      const data = this.datalist_42.map(function (item) {
        return [item[1], item[0], item[2]];
      });
      //console.log(data);
      option = {
        tooltip: {
          formatter: (params) => {
            let str = "";
            str =
              this.date_42[params.dataIndex] +
              "<br/>" +
              params.name +
              " : " +
              params.data[2];
            return str;
          },
          position: "top",
        },
        grid: {
          // show: true,
          height: "80%",
          top: "0",
          left: "0",
          right: "1%",
          bottom: "0",
          // backgroundColor: "rgba(255, 255, 255, 1)"
        },
        xAxis: {
          type: "category",
          show: true, //是否显示x轴
          data: days,
          splitArea: {
            show: false, // 是否显示分隔区域
          },
          axisLine: {
            show: false, // 是否显示坐标轴轴线
          },
          axisTick: {
            show: false, // 是否显示坐标轴刻度
          },
          axisLabel: {
            margin: 15, //刻度标签与轴线之间的距离
          },
        },
        yAxis: {
          show: false,
          type: "category",
          data: date,
          splitArea: {
            show: false,
          },
        },
        visualMap: {
          pieces: this.pieces_42,
          color: ["#03BFC6", "#58D3D8", "#9EE9EC", "#DBF7F8", "#F6F8F8"],
          textStyle: {
            color: "#666666",
          },
          orient: "horizontal",
          left: "0",
          bottom: "-5px",
          itemWidth: 30, //图形的宽度，即长条的宽度。
          itemHeight: 8, //图形的高度，即长条的高度。
          textGap: 10,
          itemGap: 70,
        },
        series: [
          {
            name: "42日最大并发值",
            left: "",
            type: "heatmap",
            data: data,
            label: {
              show: false,
              // formatter(param) {
              //   console.log(param)
              //   return param.name + " (" + param.percent * 2 + "%)";
              // },
            },
            itemStyle: {
              borderWidth: 9,
              borderColor: "#fff",
              color: "#E0EAFB",
            },
          },
        ],
      };
      option && this.myChart2.setOption(option);
    },
    initEchats3() {
      var chartDom = document.getElementById("main3");
      this.myChart3 = echarts.init(chartDom);
      this.option3 && this.myChart3.setOption(this.option3);
    },
    toPurchase(idx, meal) {
      this.$router.push({ name: "purchaseView", query: { type: idx, meal } });
    },
    openDia(type) {
      this.rechargeType = type;
      this.chargeDia = true;
    },
    cencelReset() {
      this.chargeDia = false;
      this.$refs.form.resetFields(); //重置状态
    },
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let newNoticeTypes = [];
          if (this.form.emailType) {
            newNoticeTypes.push(1);
          }
          if (this.form.phoneType) {
            newNoticeTypes.push(0);
          }
          if (!this.form.emailType && !this.form.phoneType) {
            newNoticeTypes.push(-1);
          }
          let param = {
            ...this.form,
            id: this.authInfo.id,
            noticeTypes: newNoticeTypes,
            business: "meal",
          };
          console.log(param);
          this.$http
            .post("/api/merchant/memberauth/updateAuthAccount", param)
            .then((res) => {
              if (res.code === "0000") {
                this.$message.success("设置成功");
                this.cencelReset();
                this.getAuthInfo();
              }
            });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.excess-card {
  overflow: hidden !important;
  :deep(.el-card__body) {
    padding: 17px;
  }
  &.warn {
    :deep(.el-card__body) {
      background: linear-gradient(358deg, #fce0bb 0%, #f4d5b0 100%);
    }
  }
}
.excess-wrap {
  display: flex;
  justify-content: space-between;
  .l {
    display: flex;
    .tit {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      margin-right: 6px;
      &.warn {
        color: #af7a3d;
      }
    }
    .amount {
      max-height: 20px;
      background: #869daa;
      border-radius: 4px;
      // line-height: 20px;
      padding: 2px 15px;
      font-size: 14px;
      font-family: GothamSSm-Book, GothamSSm;
      font-weight: normal;
      color: #ffffff;
      &.warn {
        background: #b86c15;
      }
    }
  }
  .r {
    display: flex;
    align-items: center;
    cursor: pointer;
    .tit {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #869daa;
      margin-right: 6px;
      &.warn {
        color: #845724;
      }
    }
    i {
      color: #bfbfbf;
      font-size: 16px;
      &.warn {
        color: #845724;
      }
    }
  }
}

.mainTitle {
  margin-bottom: 20px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #869daa;
}

.wrap {
  :deep(.el-card) {
    border-radius: 10px;
    margin-bottom: 10px;
  }
  .section {
    position: relative;
    .lines {
      position: absolute;
      left: 0;
      bottom: 35px;
      width: 100%;
      height: 1px;
      background: #d8d8d8;
    }
    .tit {
      font-size: 18px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #4f595f;
      // line-height: 25px;
    }
    .content {
      margin-top: 20px;
      padding-bottom: 40px;
      border-bottom: 1px solid #d8d8d8;
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 0;
      padding-bottom: 0px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;

      div {
        margin: 0 10px;
        cursor: pointer;
        &.color {
          color: #03bfc6;
        }
      }
    }

    .timeCycle {
      position: absolute;
      top: 18px;
      right: 32px;
      width: 200px;
      line-height: 26px;
      height: 34px;
      display: flex;
      border: 1px solid #f0f0f0;
      border-radius: 20px;
      padding: 4px;
      div {
        flex: 1;
        text-align: center;
        border-radius: 20px;
        color: #bfbfbf;
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
      }
      .activeTime {
        background: #3fbbbc;
        color: #fff;
        box-shadow: 5px 5px 10px 0px rgba(63, 187, 188, 0.25);
      }
    }
  }
  .section1 {
    .content {
      .item {
        position: relative;
        height: 190px;
        background: url(@/assets/imgs/middleWork/bg2.png) no-repeat center
          center;
        background-size: cover;
        border-radius: 10px;
        padding: 30px;
        &.sec {
          background: url(@/assets/imgs/middleWork/bg3.png) no-repeat center
            center;
          background-size: cover;
          .img {
            background: #b993e1;
          }
        }
        img.posi {
          position: absolute;
          right: 0;
          top: 0;
        }
        .img {
          width: 52px;
          height: 52px;
          background: #ffcb48;
          border-radius: 10px;
          text-align: center;
          img {
            margin: 10px auto;
          }
        }
        // .img::before{
        //   content: '';
        //   display: block;
        //   width: 30px;
        //   height: 30px;
        //   background: url(@/assets/imgs/middleWork/s5.png);
        //   background-size: cover;
        // }
        .tit {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #4f595f;
          margin-top: 20px;
        }
        .count {
          margin-top: 12px;
          font-size: 18px;
          font-family: GothamSSm-Book, GothamSSm;
          font-weight: normal;
          color: #1d1c1c;
          // line-height: 21px;
        }
      }
    }
    .bottom {
      .ac {
        color: #03bfc6;
        margin-left: 20px;
      }
      .l {
        display: flex;
      }
      .outTime {
        display: flex;
        align-items: center;
        font-size: 19px;
        .tip {
          color: #869daa;
        }
        .ti {
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #869daa;
          margin-left: 12px;
        }
      }
      // line-height: 17px;
    }
  }
  .section2 {
    .content {
      padding-bottom: 0;
    }
    .overf {
      height: 300px;
      overflow: hidden;
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      div.l {
        // margin-right: 80px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #bfbfbf;
        // line-height: 17px;
        .count {
          font-size: 12px;
          font-family: GothamSSm-Medium, GothamSSm;
          font-weight: 500;
          color: #4f595f;
          // line-height: 15px;
          &.ac {
            color: #3bb970;
          }
          &.bc {
            color: #e23d28;
          }
        }
      }
    }
  }

  .section3 {
    .content {
      padding-bottom: 0;
      border: none;
    }
    .tit {
      span {
        display: inline-block;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #7a8287;
        margin-left: 10px;
      }
    }
    .tot {
      margin-top: 30px;
      font-size: 18px;
      font-family: GothamSSm-Book, GothamSSm;
      font-weight: normal;
      color: #1d1c1c;
      line-height: 41px;
      span {
        font-size: 34px;
      }
    }
  }

  .section4 {
    .content {
      padding-bottom: 0;
      border: none;
    }
  }
  .sirb {
    height: 146px;
    background: linear-gradient(180deg, #e9effa 0%, #e8efff 100%);
    // background: url(@/assets/imgs/middleWork/bg1.png) no-repeat center center;
    background-size: cover;
    border-radius: 10px;
    display: flex;
    // align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    .left {
      .tit {
        font-size: 26px;
        font-family: PingFangSC-Light, PingFang SC;
        font-weight: 300;
        color: #456af4;
        line-height: 37px;
        letter-spacing: 2px;
        margin-bottom: 9px;
        margin-top: 15px;
      }
      .desc {
        display: flex;
        margin-bottom: 17px;
        .item {
          display: flex;
          align-items: center;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #384575;
          margin-right: 20px;
          .ic {
            width: 5px;
            height: 5px;
            background: #505e93;
            border-radius: 50%;
            margin-right: 3px;
          }
        }
      }
      .btn {
        width: 100px;
        height: 30px;
        line-height: 30px;
        background: #4a72f6;
        box-shadow: 0px 2px 0px 0px #c7cdd5;
        border-radius: 2px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        text-align: center;
        cursor: pointer;
      }
    }
  }
  .section5 {
    .content {
      padding-bottom: 0;
    }
    .bottom {
      justify-content: start;
      div.l {
        margin-right: 80px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #bfbfbf;
        // line-height: 17px;
        .count {
          font-size: 12px;
          font-family: GothamSSm-Medium, GothamSSm;
          font-weight: 500;
          color: #4f595f;
          // line-height: 15px;
          &.ac {
            color: #3bb970;
          }
        }
      }
    }
  }
}
.wrap2 {
  display: flex;
  justify-content: space-between;

  .item2 {
    display: flex;
    justify-content: space-between;
    flex: 1;
    align-items: center;
    padding: 0 8px;
    color: #666;
    .number {
      font-weight: bold;
      margin-left: 10px;
    }
    .look {
      margin-left: 20px;
    }
  }

  .one {
    padding-right: 40px;
    border-right: 1px solid #bfbfbf;
  }
  .two {
    padding-right: 20px;
    padding-left: 28px;
  }
}

.content {
  .notice {
    :deep(.el-radio) {
      display: block;
      margin: 10px 0;
    }
  }
  .width440 {
    width: 440px;
  }
  .width380 {
    width: 380px;
  }
  .cardDialog {
    .addTitle {
      font-size: 20px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: bold;
      color: rgba(0, 0, 0, 0.85);
    }
    .tip {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.65);
      margin-top: 12px;
      margin-bottom: 30px;
      span {
        color: #03bfc6;
      }
    }
    .tip1 {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #869daa;
      // line-height: 17px;
    }
    :deep(.el-form-item--small.el-form-item:nth-of-type(2)) {
      margin-bottom: 0;
    }
    :deep(.el-dialog) {
      border-radius: 16px;
    }
    :deep(.el-dialog__body) {
      padding: 10px 40px;
      padding-bottom: 60px;
    }
    :deep(.el-button--small) {
      width: 74px;
    }
    :deep(.el-input__inner) {
      padding-left: 12px;
    }
    :deep(.el-form-item__content) {
      position: relative;
    }
    .form-img {
      width: 22px;
      border-radius: 22px;
      position: absolute;
      top: 5px;
      left: 10px;
      z-index: 1;
    }
  }
}

@media screen and (max-width: 1919px) {
  .sirb {
    padding: 0 15px !important;
    .left {
      .desc {
        .item {
          margin-right: 10px !important;
        }
      }
    }
  }
}
@media screen and (max-width: 1665px) {
  .sirb {
    .left {
      .desc {
        .item {
          margin-right: 8px !important;
        }
      }
    }
  }
}
</style>
